<template>
  <div>
    <div>
      <ul id="basicTree" class="ztree"></ul>
    </div>
  </div>
</template>

<script>
export default {
name: "Permission",
  mounted() {
    this.updateTree();
  },
  methods:{
    rename(event, treeId, treeNode, isCancel) {

      if(!isCancel) {
        let requestBody = {
          pid: treeNode.pid,
          pname: treeNode.pname,
          parent: treeNode.parent
        }
        this.$axios.post("/permissions/update", requestBody).then(response => {
          let r = response.data;
          if(r.status == 0) {
            this.updateTree();
          }
        })
      }

    },
    beforeRemove(treeId, treeNode) {
      return !treeNode.isParent;
    },
    remove(event, treeId, treeNode) {
      let pid = treeNode.pid;
      let config = {
        headers: {
          "Content-Type": "text/plain"
        }
      }
      this.$axios.post("/permissions/delete", pid, config).then(response => {
        let r = response.data;
        if(r.status == 0) {
          this.updateTree();
        } else {
          this.$notify.error({
            title: '错误',
            message: '删除失败，可能是有依赖'
          });
        }
      })
    },
    addHoverDom(treeId, treeNode) {
      // 获取当前树节点对应的DOM对象，并且将其封装为jQuery对象
      let node = $("#" + treeNode.tId + "_span");
      let nextHtml =node.next().html();
      if(nextHtml == "+") return;
      let add = $("<span>+</span>")
      node.after(add);
      add.on("click", () => {
        let ztree = $.fn.zTree.getZTreeObj("basicTree");
        let newNodeJson = {pname:"new",parent:treeNode.pid}
        // addNodes返回的就是已经添加的新节点的集合
        let newNodes = ztree.addNodes(treeNode,newNodeJson);

        // 把新节点持久化
        this.$axios.post("/permissions/save", newNodeJson).then(response => {
          let r = response.data;
          if(r.status == 0) {
            newNodes[0].pid = r.data.pid;
          } else {
            alert("增加失败");
          }
        });

      })

    },
    removeHoverDom(treeId, treeNode) {
      let node = $("#" + treeNode.tId + "_span");
      node.next().remove();
    },
    updateTree() {
      this.$axios.post("/permissions/list").then(res=>{
        // 渲染ztree
        let settings = {
          view: {
            addHoverDom: this.addHoverDom,
            removeHoverDom: this.removeHoverDom
          },
          edit: {
            enable: true
          },
          data: {
            key: {
              name: "pname"
            },
            simpleData: {
              enable: true,
              idKey: "pid",
              pIdKey: "parent",
            }
          },
          callback: {
            beforeRemove: this.beforeRemove,
            onRemove: this.remove,
            onRename: this.rename
          }
        };

        let r = res.data;
        // 设置树的数据
        let nodes = r.data;

        // 初始化树
        let ztree = $.fn.zTree.init($("#basicTree"), settings, nodes);
        ztree.expandAll(true);
      })
    }
  }
}

</script>

<style scoped>

</style>